<template>
    <view :style="{
        paddingTop: statusBarHeight + 'px',
        width: '750rpx',
        borderBottomStyle: 'solid',
        borderBottomWidth: '1px',
        borderBottomColor: '#ebebeb',
        position: 'fixed',
        left: 0,
        top: 0,
        zIndex: 9999,
        backgroundColor: '#ffffff'
    }">
        <view :style="{
            height: 44 + 'px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            position: 'relative',
            fontSize: 0
        }">
            <view @click="handlerSelectCity" :style="{
                color: '#ff0000',
                zIndex: 6,
                position: 'absolute',
                left: '20rpx',
                height: '16px',
                backgroundColor: '#fff',
                display: 'flex',
                alignItems: 'center'
            }">
                <view :style="{
                    display: 'flex',
                    alignItems: 'center',
                    fontSize: '14px',
                    height: '16px',
                    flexDirection: 'row'
                }">

                    <view :style="{
                        paddingRight: '14rpx',
												height: '16px'
                    }"><text :style="{
                        fontSize: '14px',
                        lineHeight: '16px',
                        fontWeight:'bold',
                        color: '$uni-color-qian',
                    }">{{ currentCity }}</text></view>
                    <image :style="{
                        width: '16rpx',
                        height: '16rpx'
                    }" src="http://images.vhake.com/a82d5398c7d691c38fa82af12607d2c5.png" alt="">

                    </image>
                </view>
            </view>
            <view :style="{

            }"><text :style="{
                fontSize: '16px',
                color: '#000000',
                fontWeight: 'bold',
                lineHeight: '16px'
            }">{{ title }}</text></view>
            <view :style="{
                position: 'absolute',
                right: '20rpx',
                width: '36rpx',
                height: '36rpx',
                fontSize: 0,
            }" @click.stop="handlerClick"><image :style="{
                width: '36rpx',
                height: '36rpx'
            }" src="https://images.http.org.cn/help.png" alt=""></image></view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {

            };
        },
        props: {
            title: String,
            rightIcon: {
                type: String,
                default: () => {
                    return '';
                }
            },
            iconStyle: {
                type: String,
                default: () => {
                    return '';
                }
            },
            currentCity: {
                type: String,
                default: () => {
                    return '深圳市';
                }
            }
        },
        methods: {
            goBack() {
                uni.navigateBack({
                    delta: 1
                });
            },
            handlerClick() {
                this.$emit('rightClick', 1);
            },
            handlerSelectCity() {
                this.$emit('handlerSelectCity', 1)
            },
            handlerChange(e) {
                this.$emit('pickerChange', e.detail.value);
            },
            handlerLeftClick() {
                this.$emit('leftClick', 1)
            }
        },
        computed: {
            ...mapState(['statusBarHeight']),
            pdTop() {
                return 'padding-top: ' + this.statusBarHeight + 'px;'
            }
        }
    };
</script>

